<!--role 表和role_menu 的新增 和 编辑-->
<template>
  <el-button text @click="props.ComplieRoleData.dialogVisible = true">

  </el-button>

  <el-dialog
      v-model="props.ComplieRoleData.dialogVisible"
      :title="props.ComplieRoleData.transition==0?'角色新增':'角色编辑'"
      width="30%"
      ref="tree"
      :before-close="handleClose"
  >
    <div>
     <el-row  class="elrowkin"><el-col :span="5">角色名称：</el-col><el-col :span="19"><el-input v-model="props.ComplieRoleData.role.name"  style="width: 300px"/></el-col></el-row>
      <el-row class="elrowkin"> <el-col :span="5">权限字符：</el-col><el-input v-model="props.ComplieRoleData.role.roleKey"  style="width: 300px"/></el-row>
      <el-row class="elrowkin"><el-col :span="5">菜单权限：</el-col><el-col :span="19">
        <el-checkbox v-model="showMenuData.deptExpand" @change="deptExpandMothed">展开</el-checkbox>
<!--        <el-checkbox v-model="deptNodeAll" @click="deptNodeAllMothed(e,val)">全选/全不选</el-checkbox>-->
        <el-checkbox v-model="showMenuData.deptFather" @click="deptFatherMothed()">父子联动</el-checkbox>
        <ShowMenu :ShowMenuData="showMenuData" ref="childRef" :MenuF="props.ComplieRoleData.menu"></ShowMenu>
      </el-col></el-row>
      <el-row class="elrowkin"> <el-col :span="5">备注：</el-col><el-input v-model="props.ComplieRoleData.role.remark"  style="width: 300px"/></el-row>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="roloMenuYes">确定</el-button>
        <el-button type="primary" @click="props.ComplieRoleData.dialogVisible = false">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {defineProps, onMounted, reactive, ref,onUpdated} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import axios from "axios";
import ShowMenu from "./ShowMenu.vue";
import {useRouter} from "vue-router";
const router=useRouter()
const props =defineProps ({
  ComplieRoleData: {
    type: Object,
  },
});
const showMenuData = reactive({
  deptExpand:false,
  deptFather:false,
  menuList:props.ComplieRoleData.menu,
  menuArray:[],
})
onUpdated(()=>{
  childRef.value.childMethod()
})
//选定的菜单对象
const menu = ref();
onMounted(()=>{
  // childRef.value.childMethod()
})
console.log(props.ComplieRoleData,"rolecompile")
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('是否要关闭')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
const roleMenuInsert =()=>{
  props.ComplieRoleData.dialogVisible = false;

}
//新增
const roloMenuYes =()=>{
  //权限对象
  const role = props.ComplieRoleData.role
  if(props.ComplieRoleData.transition==0){ //transition=0 是新增
    const menuArray =childRef.value.returnMenu();
    axios.post("http://localhost:1688/role/insertRole", role).then((data)=>{
      const val =data.data;
      console.log(val)
      if(val.code==403){
        ElMessage.error("权限不足")
      }else {
        console.log(data)
        const formData =new FormData();
        formData.append("menuArray",menuArray)
        formData.append("roleId",data.data.data)
        axios.post("http://localhost:1688/role/saveMenuRole",formData).then(data=>{
        })
        router.go(0);

      }


    })
  }else{
    const menuArray =childRef.value.returnMenu();
    console.log(menuArray)
    const formData =new FormData();
    formData.append("sysRole",JSON.stringify(props.ComplieRoleData.role))
    formData.append("menuArray",menuArray)
    axios.put("http://localhost:1688/role/updateRoleMenu",formData).then((data)=>{
      const val =data.data;
      console.log(val)
      if(val.code==403){
        ElMessage.error("权限不足")
      }else {
        console.log(data)
        router.go(0);

      }

    })
  }
  props.ComplieRoleData.dialogVisible = false
}
const childRef = ref()
const deptExpandMothed =()=>{
  if ( showMenuData.deptExpand){
    showMenuData.deptExpand =false;
  }else{
    showMenuData.deptExpand =true;

  }
  showMenuData.deptExpand =! showMenuData.deptExpand;
  childRef.value.childMethod()


}
const deptFatherMothed =()=>{
  if ( showMenuData.deptFather){
    showMenuData.deptFather =false;
  }else{
    showMenuData.deptFather =true;

  }
  showMenuData.deptFather =! showMenuData.deptFather;
  childRef.value.childMethod()


}

</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
.elrowkin{
  margin-top: 5px;
}
</style>
